import { microCreateMinis } from '../../minis'
import './index.scss'
import draggable from 'vuedraggable'

/** 拼团*/
export default {
  name: 'full_shipping-box',
  components:{
    draggable
  },
  mixins: [microCreateMinis],
  props: {},
  data() {
    return {
      // 默认图片
      img: 'https://img.yzcdn.cn/public_files/2019/09/10/179bbc6e77d7cd4f4b774f868b1b3c26.png!large.webp',
      formData: {
        indicator:1,
        shipping_list: [], // 限时折扣列表 {title:''}
        spacing:0,  // 商品间距
        marginTop:'0', // 上边距
        marginBottom:'0', // 下边距
        commodityStyle:'0', // 商品样式
        bg:'0', // 背景
        cornerStyle:'16', // 边角样式
        imgFill:'cover', // 图片填充
        textAlign:'0', // 文本对齐
        ratio:'0', // 图片显示比例
        buy_btn_type: 1, // 购买按钮的样式
        is_name:'0',// 商品名称
        describe:'0',// 商品描述
        price:'0',// 商品价格
        line:'0',// 划线价
        stock:'0',// 剩余库存
        buy_btn:'0',// 购买按钮
        count_down:'0',// 倒计时
        collage_type:'0', // 拼团类型
        show_buy_btn:1, 
        button_text:'去秒杀',
        end:'0'
      },
      checked: true,
      dialogFormVisible:false,
      tabActive: '0',
      tabList: [
        {
          icon: 'el-icon-bank-card',
          title: '大图模式'
        },
        {
          icon: 'el-icon-bank-card',
          title: '一行两个'
        },
        {
          icon: 'el-icon-bank-card',
          title: '一行三个'
        },
        {
          icon: 'el-icon-bank-card',
          title: '详细列表'
        },
        {
          icon: 'el-icon-bank-card',
          title: '一大两小'
        },
        {
          icon: 'el-icon-bank-card',
          title: '横向滑动'
        }
      ],
      commonCheckFieldRules: 'checkData', // 当前组件默认的规则判断函数
      mySelfCheckRules: 'mySelfCheckFun'// 我自己的验证规则函数  比如弹窗之类的
    }
  },
  watch: {
    shipping_list: {
      deep: true,
      handler() {
        // this.init();
      }
    }
  },
  computed: {
    commodityStyles(){
      if(this.formData.commodityStyle == '0'){
        return `box-shadow:1px 1px 5px 0px #dadada`
      }else{
        return `border:1px solid #dadada`
      }
    },
    paddingTops(){
      if(this.formData.ratio == '0'){
        return '65%'
      }else if(this.formData.ratio == '1'){
        return '100%'
      }else if(this.formData.ratio == '2'){
        return '132%'
      }else if(this.formData.ratio == '3'){
        return '55%'
      }
    },
    countWidth(){
      if(this.formData.indicator === 2 || this.formData.indicator === 3 || this.formData.indicator === 5){
        return `width:calc(100% + ${this.formData.spacing/2}px)`
      }else if(this.formData.indicator === 6){
        return "width:auto"
      }else{
        return "width:100%"
      }
    },
    shipping_list() {
      return this.formData.shipping_list
    }
  },
  filters: {
    buy_btn_type(val) { // 标题
      let str = ''
      switch (val) {
        case 3:
          str = 'danger'
          break
        // case 8:
        //   str = 'danger'
        //   break
      }
      return str
    },
    buy_btn_round(val) { // 标题
      let str = false
      switch (val) {
        case 3:
          str = true
          break
        // case 8:
        //   str = 'danger'
        //   break
      }
      return str
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      if (!this.formData.shipping_list.length) {
        this.addUmp()
        this.addUmp()
      }
    },
    tabListC(index){
      if(index == 1){
          this.formData.ratio = '0'
        }else {
          this.formData.ratio = '1'
        }
    },
    wayChange(index){
      // console.log(index)
     if(this.formData.shipping_list[index].way ==='0'){
      this.dialogFormVisible = false
     }else{
      this.dialogFormVisible = true
     }
    },
    textClick(index){
      this.formData.textAlign = index
    },
    imgFillClick(index){
      this.formData.imgFill = index
    },
    ratioClick(index){
      this.formData.ratio = index
    },
    /** 设置默认值*/
    addUmp() {
      this.formData.shipping_list.push({
        name: '满包邮',
        way:'0',
        img: 'https://img.yzcdn.cn/public_files/2019/09/10/179bbc6e77d7cd4f4b774f868b1b3c26.png!large.webp'
      })
    },
    checkData() {
      this.myCheckResult(true)
    },
    /** 弹窗*/
    mySelfCheckFun() { // 可以选择调用默认规则判断
    }
  }
}
